<template>
	<div class="about">
		<div class="item" v-for="(item,index) in list" :style="{filter:item.show?'invert(1)':'none'}"
			@mouseenter="showItem(item,index)" @mouseleave="hideItem(item,index)" @click="link(index)">
			<img :src="item.image">
			<span>{{item.name}}</span>

			<div class="left" v-if="item.content!=''" :style="{width:item.show?'15rem':'0',left:item.show?'-15rem':'0'}">
				<div class="transition-box">{{item.content}}</div>
			</div>

		</div>

	</div>
</template>

<script>
	import img1 from '../../assets/img/shop.png'
	import img2 from '../../assets/newPage/call.png'
	import img3 from '../../assets/newPage/notice.png'
	export default {
		name: "",
		components: {},
		data() {
			return {
				list: [{
						name: '在线客服',
						image: img1,
						content: '',
						show: false
					},
					{
						name: '服务热线',
						image: img2,
						content: '400-6565-215',
						show: false
					},
					{
						name: '平台公告',
						image: img3,
						content: '',
						show: false
					}
				],
				siteIfon:{}
			};
		},
		mounted() {
			this.$api.home.footersite().then((res) => {
				if (res.code == 1) {
					this.siteIfon = res.data;
				}
			});
		},
		methods: {
			showItem(item, index) {
				item.show = true
				if(index == 1){
					item.content = this.siteIfon.site_400
				}
				
			},
			hideItem(item, index) {
				item.show = false
			},
			link(index) {
				if(index == 0){
					window.open(
						"https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391"
					);
				}
				if(index == 2){
					window.location.reload()
				}
				
			},
		},
	};
</script>

<style scoped lang="scss">
	.about {
		position: fixed;
		right: 0;
		top: 21rem;
		display: flex;
		flex-direction: column;
		z-index: 999;

		.item {
			width: 5.63rem;
			height: 5.63rem;
			background: #FFFFFF;
			opacity: 0.9;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 0.88rem;
			font-family: SourceHanSansCN;
			font-weight: 500;
			color: #333333;
			line-height: 2.25rem;
			margin-bottom: 0.1rem;
			position: relative;
			cursor: pointer;
			z-index: 998;
			img {
				width: 1.81rem;
				height: 1.81rem;
			}

			.left {
				z-index: 997;
				position: absolute;
				left: 0;
				top: 0;
				height: 5.63rem;
				width: 0;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: width 0.5s,left 0.5s linear 0s;
				// transition: left 0.5s linear 0s;
				background: #fff;
				.transition-box {
					// width: 15rem;
					width: 100%;
					height: 100%;
					color: #000;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.5rem;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
</style>
